<!--
@file: organization
@description: 
@author:  lenovo whr2349
@time: 2021/6/30 11:11
-->

<template>
  <div class="" style="">
    <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
    >新增组织
    </el-button
    >

    <whrtable
        :table-data="table"
        :table-height-y="242"
        :current-page="currentPage"
        :total="total"
        @current-change="handleCurrentChange"
        row-key="key"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    >
      <el-table-column label="部门名称" prop="name"></el-table-column>
      <el-table-column label="部门表示key" prop="key"></el-table-column>
      <el-table-column label="序号" prop="sort">
        <template #default="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          {{
            $timestampFormat(
                scope.row.createdTime,
                "YYYY-MM-DD HH:mm:ss"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updatedTime">
        <template #default="scope">
          {{
            $timestampFormat(
                scope.row.updatedTime,
                "YYYY-MM-DD HH:mm:ss"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="mini"
              @click.stop="edit(scope.$index, scope.row)"
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click.stop="delete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </whrtable>
    <el-dialog
        :title="dialogTitle"
        v-model="dialogFormVisible"
        append-to-body
        width="30%"
        @close="close"
    >
      <el-form
          :model="form"
          :label-width="formLabelWidth"
          label-position="left"
      >
        <el-form-item label="组织名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="组织标识key">
          <el-input v-model="form.key"></el-input>
        </el-form-item>
        <el-form-item label="上级组织标识key">
          <el-input v-model="form.superiorKey"></el-input>
        </el-form-item>
        <el-form-item label="排序级别">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                    >
                    <el-button type="primary" @click="clickConform"
                    >确 定</el-button
                    >
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import whrtable from "@/components/whrtable";
import {getCurrentInstance} from "vue";
import {onMounted, reactive, toRefs} from "vue";
import {ElMessage} from "element-plus";

export default {
  components: {
    whrtable,
  },

  data() {
    return {};
  },
  created() {
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    changeUsing(index, data) {
      this.$nextTick(function () {
        this.tableData[index].isUsing = data.isUsing;
      });
      console.log(this.tableData[0].isUsing);
    },
  },

  setup(props, ctx) {
    const internalInstance = getCurrentInstance();
    const request =
        internalInstance.appContext.config.globalProperties.$request;
    const tabState = reactive({
      table: [],
      total: 0,
      currentPage: 1,
    });
    const tableMedthods = {
      getdata() {
        request
            .one({
              url: "organization/tree",
              data: {
                currentPage: tabState.currentPage,
                pageSize: 20,
              },
            })
            .then((res) => {
              if (res.success) {
                console.log(res)
                tabState.table = res.data.data;
                tabState.total = res.data.total;
              }
            });
      },
      edit(index, row) {
        console.log(index, row);
        formState.dialogFormVisible = true
        formState.dialogTitle = '编辑组织'
        formState.form = row
      },
      delete(index, row) {
        console.log(index, row);
      },
      handleCurrentChange($event) {
        if (typeof $event === "number" && !isNaN($event)) {
          tabState.currentPage = Number($event);
          tableMedthods.getdata();
        } else {
          return false;
        }
      },
    };

    const formState = reactive({
      dialogFormVisible: false,
      dialogTitle: "",
      form: {
        name: "",
        key: "",
        superiorKey: "",
        sort: 1,
      },
      formLabelWidth: "120px",
    });
    const formMedhods = {
      close() {
        formState.form = {
          name: "",
          key: "",
          superiorKey: "",
          sort: 1,
        }
      },
      clickConform() {
        request
            .one({
              url: "organization",
              type: "POST",
              data: {
                ...formState.form,
              },
            })
            .then((res) => {
              if (res.success) {
                ElMessage.success("操作成功");
                tableMedthods.getdata();
              }
            });

        formState.dialogFormVisible = false;
      },
    };
    onMounted(() => {
      tableMedthods.getdata();
    });
    return {
      ...toRefs(formState),
      ...formMedhods,
      ...toRefs(tabState),
      ...tableMedthods,
    };
  },
};
</script>
<style scoped>
/* 引入公共css类 */
/*@import url()*/
</style>
